<script setup lang="ts">
import { defineEmits } from 'vue'
import Ava from '@/assets/image/Ava.jpg'
import Diana from '@/assets/image/Diana.jpg'
import Source from '@/views/content/Source.vue'

const props = defineProps<{
  data: MessageItemObj
}>()

const emit = defineEmits(['quickQuestion'])
// 定义一个函数，通过emit发送快捷提问给父组件
function quickQuestions(data: string) {
  emit('quickQuestion', data)
}
</script>

<template>
  <div class="message-item">
    <div class="avatar">
      <el-avatar :size="40" :src="data.role === 'user' ? Ava:Diana" />
    </div>
    <div class="message-content">
      <div class="message-bot" v-if="data.role === 'user'">
        <v-md-preview :text="data.content"></v-md-preview>
      </div>
      <div v-else>
        <!--        <Answer :sources="data.sources as Source[]" :text="data.content"
                        :questions="data.moreQuestions" />-->
        <div class="answer">
          <div>
            <v-md-preview :text="data.content"></v-md-preview>
          </div>
          <div v-if="data.sources && data.sources.length > 0" class="card-model">
            <h3>资料来源</h3>
            <div class="card-list" style="width: 100%">
              <div v-for="(source,index) in data.sources" :key="index">
                <Source :data="source" :num="index + 1"></Source>
              </div>
            </div>
          </div>
          <div v-if="data.moreQuestions" class="card-model">
            <h3>猜你想问</h3>
            <div class="card-list" style="width: 100%">
              <ul>
                <li v-for="(item,index) in data.moreQuestions" :key="index">
                  <el-link type="primary" @click="() => quickQuestions(item)">{{ item }}</el-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.message-item {
  padding: 20px 0;
  display: flex;
  justify-content: left;
  width: 100%;
  gap: 10px;
}

.message-content {
  padding-top: 10px;
  font-size: 13px;
}

::v-deep(.github-markdown-body) {
  padding: 0;
}

.answer {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-model {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-list {
  display: flex;
  flex-wrap: wrap; // 允许子元素换行
  align-items: flex-start; // 子元素顶部对齐
  gap: 10px; // 子元素之间的间隔
}

</style>
